<template>
	<div class="workflow-container">
		<div class="top-section">
			<!-- 查询过滤部分 -->
			<div class="search-filters">
				<h3>查询</h3>
				<div class="radio-group">
					<label class="radio-item">
						<input type="radio" name="timeFilter" value="hour" v-model="timeFilter"
							@change="handleFilterChange">
						<span>最近一小时</span>
					</label>
					<label class="radio-item">
						<input type="radio" name="timeFilter" value="day" v-model="timeFilter"
							@change="handleFilterChange">
						<span>最近一天</span>
					</label>
					<label class="radio-item">
						<input type="radio" name="timeFilter" value="week" v-model="timeFilter"
							@change="handleFilterChange">
						<span>最近一周</span>
					</label>
					<label class="radio-item">
						<input type="radio" name="timeFilter" value="all" v-model="timeFilter"
							@change="handleFilterChange">
						<span>所有</span>
					</label>
				</div>
			</div>

			<!-- 统计卡片部分 -->
			<div class="stats-cards">
				<div class="stat-card">
					<div class="stat-content">
						<div class="stat-circle light-blue">
							<span>{{totalItems}}</span>
						</div>
						<div class="stat-label">任务</div>
					</div>
				</div>
				<div class="stat-card">
					<div class="stat-content">
						<div class="stat-circle light-yellow">
							<span>{{ robotNumber }}</span>
						</div>
						<div class="stat-label">机器人</div>
					</div>
				</div>
				<div class="stat-card">
					<div class="stat-content">
						<div class="stat-circle light-purple">
							<span>{{ abilityNumber }}</span>
						</div>
						<div class="stat-label">能力</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 表格部分 -->
		<div class="table-section">
			<!-- 显示当前过滤状态信息 -->
			<div class="filter-info" v-if="timeFilter !== 'all'">
				<span class="info-icon">ℹ️</span>
				<span class="info-text">
					当前显示：
					<b>{{ timeFilter === 'hour' ? '最近一小时' : timeFilter === 'day' ? '最近一天' : '最近一周' }}</b>
					的数据 (共 <b>{{ totalItems }}</b> 条)
				</span>
				<span class="clear-filter" @click="timeFilter = 'all'">清除过滤</span>
			</div>

			<div class="table-container">
				<!-- 无数据状态 -->
				<div v-if="filteredEvents.length === 0" class="empty-state">
					<div class="empty-icon">📊</div>
					<div class="empty-message">
						{{ timeFilter !== 'all' ? '当前筛选条件下无数据' : '暂无数据' }}
					</div>
					<!-- <button v-if="timeFilter !== 'all'" class="empty-action" @click="timeFilter = 'all'">
						显示所有数据
					</button> -->
				</div>

				<!-- 有数据状态 -->
				<table v-else class="data-table">
					<thead>
						<tr>
							<th class="status-col"></th>
							<th>名称</th>
							<th>种类</th>
							<th>任务状态</th>
							<th>描述</th>
							<th>创建时间</th>
							<th>已运行时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<!-- 工作流行及其任务 -->
						<template v-for="(item, index) in filteredEvents" :key="index">
							<!-- 工作流行 -->
							<tr :class="{'workflow-row': true, 'expanded': item.isVisible}">
								<td class="status-col">
									<div v-if="item.status" class="status-icon"
										:class="getStatusIconClass(item.status)">
										<img :src="getStatusIconType(item.status)" alt="状态" class="status-svg" />
									</div>
								</td>
								<td>{{ item.name }}</td>
								<td>{{ item.kind }}</td>
								<td>
									<span v-if="item.status.phase" :class="['status-tag', item.status.phase]">
										{{ item.status.phase }}
									</span>
								</td>
								<td>{{ 'item.status.spce.docs' || '-' }}</td>
								<td>{{ formatDate(item.creationTimestamp) }}</td>
								<td>{{ item.runTime }}</td>
								<td class="actions">
									<div class="action-icons">
										<img :src="`./src/assets/${item.isVisible ? 'unshow.png': 'show.png'}`"
											class="action-icon" @click="handleTaskClick(item)" alt="方向" />
										<img src="../assets/edit.png" class="action-icon"
											@click="handleMoreActionsClick(item)" alt="更多操作" />
									</div>
								</td>
							</tr>

							<!-- 任务行 - 当工作流展开时显示 -->
							<template v-if="item.isVisible && item.status.groups"
								v-for="(task, taskIndex) in Object.values(item.status.groups)" :key="`${index}-${taskIndex}`">
								<tr class="task-row">
									<td class="action-status-col">=></td>
									<td>{{task.Name}}</td>
									<td>{{task.Kind}}</td>
									<td>{{item.status.phase}}</td>
									<td>{{ getGroupDesc(item, taskIndex) }}</td>
									<td>创建时间</td>
									<td>运行时间</td>
									<td class="actions">
										<div class="action-icons">
											<img :src="`./src/assets/${task.isVisible ? 'unshow.png':'show.png' }`"
												class="action-icon" @click="handleGroupClick(task)" alt="方向" />
										</div>
									</td>
								</tr>

								<!-- Group子任务行 - 当Group展开时显示 -->
								<template v-if="task.isVisible">
									<tr v-for="(subTask, subIndex) in task.subTasks"
										:key="`${index}-${taskIndex}-${subIndex}`" class="subtask-row">
										<td class="status-col">></td>
										<td>{{ subTask.Name }}</td>
										<td class="task-kind">{{ subTask.Kind }}</td>
										<td>{{ task.phase }}</td>
										<td>{{ getActionDesc(task,subIndex) }}</td>
										<td>{{ subTask.creationTimestamp }}</td>
										<td>{{ subTask.runTime || '-' }}</td>
										<td class="actions">
											<div class="action-icons">
											</div>
										</td>
									</tr>
								</template>

								<!-- 当Group展开但没有子任务时显示提示行 -->
								<template v-if="task.isVisible && (!task.subTasks || task.subTasks.length === 0)">
									<tr class="no-tasks-row">
										<td colspan="9" class="no-tasks-message">当前Group暂无任务</td>
									</tr>
								</template>


							</template>

							<!-- 当工作流展开但没有任务时显示提示行 -->
							<tr v-if="item.isVisible && (!item.spec || item.spec.groups === 0)" class="no-tasks-row">
								<td colspan="9" class="no-tasks-message">当前工作流暂无任务</td>
							</tr>

						</template>
					</tbody>
				</table>
			</div>
			<!-- 分页区域 - 只在有数据时显示 -->
			<div class="pagination" v-if="totalItems > 0">
				<!-- 上一页按钮 -->
				<a href="#" class="page-btn" @click.prevent="goToPrevPage"
					:class="{ disabled: currentPage === 1 }">
					<span class="page-arrow">«</span> 上一页
				</a>

				<!-- 第一页按钮 -->
				<a href="#" v-if="currentPage > 3" class="page-btn"
					:class="{ active: currentPage === 1 }"
					@click.prevent="goToPage(1)">1</a>

				<!-- 前省略号 -->
				<span v-if="currentPage > 4" class="ellipsis">...</span>

				<!-- 当前页码前后的页码 -->
				<template v-for="p in getPaginationNumbers()" :key="p">
					<a href="#" class="page-btn" :class="{ active: currentPage === p }"
						@click.prevent="goToPage(p)">{{ p }}</a>
				</template>

				<!-- 后省略号 -->
				<span v-if="currentPage < totalPages - 3" class="ellipsis">...</span>

				<!-- 最后一页按钮 -->
				<a href="#" v-if="currentPage < totalPages - 2 && totalPages > 1" class="page-btn"
					:class="{ active: currentPage === totalPages }"
					@click.prevent="goToPage(totalPages)">{{ totalPages }}</a>

				<!-- 下一页按钮 -->
				<a href="#" class="page-btn" @click.prevent="goToNextPage"
					:class="{ disabled: currentPage === totalPages || totalPages === 0 }">
					下一页 <span class="page-arrow">»</span>
				</a>

				<!-- 页码信息 -->
				<div class="page-info-section">
					<span class="page-info">共 {{ totalPages }} 页</span>
					<span class="page-info">共 {{ totalItems }} 条</span>
				</div>

				<!-- 跳转区域 -->
				<div class="page-jump-section">
					<span class="goto">跳转到</span>
					<input type="text" class="page-input" v-model="pageJump" @keyup.enter="handlePageJump" />
					<span class="page-text">页</span>
					<button class="confirm-btn" @click="handlePageJump">确定</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted,
		computed
	} from 'vue';
	import api from '../api/api.js';
	import {
		useRouter
	} from 'vue-router';

	// 导入SVG图标
	import ErrorIcon from '../assets/error.svg';
	import SuccessIcon from '../assets/success.svg';
	import UnknownIcon from '../assets/unknow.svg';

	const events = ref([]);
	const groupEvents = ref([]);
	let refreshInterval = null;
	const timeFilter = ref('all');

	const robotNumber = ref(0);
	const getRobotNumber = async () => {
		let response1 = await api.getRobotNumbers();
		console.log(response1)
		robotNumber.value = response1.data.items.length
	}
	const abilityNumber = ref(0);
	const getAbilityNumber = async () => {
		let [response1, response2] = await api.getAbilityNumber();
		let data = response1.data.items.concat(response2.data.items)
		// 所有Device类型状态为running得Action之和
		let num = data.filter(el => el.spec.type === 'device').filter(el => el.status.phase === 'Running')?.length
		abilityNumber.value = num
	}

	// 分页相关状态
	const currentPage = ref(1);
	const totalItems = ref(0);
	const pageSize = ref(32); // 每页显示10条（改为10条）
	const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value) || 1); // 至少有1页
	const pageJump = ref(''); // 用于存储跳转页码的输入值

	// 添加处理方法
	const handleTaskClick = async (item) => {
		console.log(`点击了方向按钮:`, item);

		// 切换可见性状态
		item.isVisible = !item.isVisible;
	};

	const emit = defineEmits(['switchComponent']);


	const getGroupDesc = (item, index) => {

		if (!item || !item.spec || !item.spec.groups || !item.spec.groups[index]) {
			return '-';
		}
		const group = item.spec.groups[index];
		return group.desc && group.desc.docs ? group.desc.docs : '-';
	};

	const getActionDesc = (task, index) => {
		console.log("这是GetActionDesc中的Task")
		console.log(task)

		if (!task || !task.spec || !task.spec.actions || !task.spec.actions[index]) {
			return '-';
		}
		const actions = task.spec.actions[index];
		return actions.desc && actions.desc.docs ? actions.desc.docs : '-';
	};


	const handleMoreActionsClick = (item) => {
		console.log(`点击了更多操作按钮:`, item);
		// 通知父组件切换到TaskDistribution组件
		emit('switchComponent', 'TaskDistribution', { itemData: item });
	};

	const handleGroupClick = async (task) => {
		try {
			// 切换可见性状态
			task.isVisible = !task.isVisible;

			// 如果展开并且没有子任务数据，则获取数据
			if (task.isVisible && (!task.subTasks || task.subTasks.length === 0)) {
				const params = {
					Name: task.Name,
					Namespace: task.Namespace
				};
				console.log('获取组数据参数:', params);

				const response = await api.getGroupsData({
					params
				});
				console.log('获取组数据响应:', response.data);

				// 更新task的phase状态 - 这是新增的部分
				if (response.data && response.data.status && response.data.status.phase) {
					task.phase = response.data.status.phase;
					task.spec = response.data.spec;
				}

				// 处理status.actions并设置为subTasks
				if (response.data && response.data.status && response.data.status.actions) {
					let actionsData = response.data.status.actions;

					// 确保actions是数组
					if (!Array.isArray(actionsData)) {
						console.log('actions不是数组，尝试转换:', actionsData);
						// 如果是对象，尝试转换为数组
						if (typeof actionsData === 'object' && actionsData !== null) {
							actionsData = Object.values(actionsData);
						} else {
							// 如果不是对象或转换失败，初始化为空数组
							actionsData = [];
						}
					}

					// 为每个子任务添加isVisible属性
					task.subTasks = actionsData.map(item => ({
						...item,
						isVisible: false
					}));
				} else if (response.data && response.data.status && response.data.status.actions) {
					// 如果actions在status中
					let actionsData = Object.values(response.data.status.actions);
					task.subTasks = actionsData.map(item => ({
						...item,
						isVisible: false
					}));
				} else {
					// 如果没有actions数据，初始化为空数组
					task.subTasks = [];
				}
			}
		} catch (error) {
			console.error('获取组数据失败:', error);
			console.log('错误详情:', error);
			task.subTasks = [];
		}

		console.log(task.subTasks)
	};

	// 获取状态图标的类名
	const getStatusIconClass = (status) => {
		if (!status) return '';

		switch (status) {
			case 'running':
				return 'success';
			case 'success':
				return 'success';
			case 'error':
				return 'error';
			case 'migrating':
				return 'error';
			default:
				return 'unknown';
		}
	};

	// 获取状态图标URL
	const getStatusIconType = (status) => {
		if (!status) return UnknownIcon;

		switch (status) {
			case 'running':
				return SuccessIcon;
			case 'error':
				return ErrorIcon;
			case 'migrating':
				return ErrorIcon;
			case 'success':
				return SuccessIcon;
			default:
				return UnknownIcon;
		}
	};

	// 时间格式化方法
	const formatDate = (dateString) => {
		if (!dateString) return '-';

		try {
			const date = new Date(dateString);
			if (isNaN(date.getTime())) return dateString;

			return date.toLocaleString('zh-CN', {
				year: 'numeric',
				month: '2-digit',
				day: '2-digit',
				hour: '2-digit',
				minute: '2-digit',
				second: '2-digit'
			});
		} catch (error) {
			console.error('日期格式化错误:', error);
			return dateString;
		}
	};

	// 时间过滤相关方法
	const isWithinTimeFilter = (timestamp) => {
		if (!timestamp || timeFilter.value === 'all') return true;

		try {
			const currentTime = new Date();
			const itemTime = new Date(timestamp);

			// 检查是否是有效日期
			if (isNaN(itemTime.getTime())) return true;

			const diffInHours = (currentTime - itemTime) / (1000 * 60 * 60);

			switch (timeFilter.value) {
				case 'hour':
					return diffInHours <= 1;
				case 'day':
					return diffInHours <= 24;
				case 'week':
					return diffInHours <= 168; // 7 * 24
				default:
					return true;
			}
		} catch (error) {
			console.error('时间过滤错误:', error, timestamp);
			return true; // 出错时默认显示该项
		}
	};

	// 根据时间过滤后的事件数据
	const filteredEvents = computed(() => {
		if (!events.value || events.value.length === 0) return [];

		// 先应用时间过滤
		const timeFiltered = events.value.filter(item => isWithinTimeFilter(item.creationTimestamp));

		console.log(`时间过滤: ${timeFilter.value}, 原数据: ${events.value.length}条, 过滤后: ${timeFiltered.length}条`);

		// 更新总条数
		totalItems.value = timeFiltered.length;

		// 如果当前页超出总页数，则回到最后一页
		const maxPage = Math.ceil(totalItems.value / pageSize.value) || 1;
		if (currentPage.value > maxPage) {
			currentPage.value = maxPage;
		}

		// 计算当前页的数据范围
		const startIndex = (currentPage.value - 1) * pageSize.value;
		const endIndex = Math.min(startIndex + pageSize.value, timeFiltered.length);

		// 返回当前页的数据
		return timeFiltered.slice(startIndex, endIndex);
	});

	// 处理过滤条件变化
	const handleFilterChange = () => {
		console.log('时间过滤条件变化:', timeFilter.value);
		// 切换过滤条件时，重置为第一页
		currentPage.value = 1;
		// 不需要重新调用fetchEvents，因为filteredEvents会自动根据timeFilter计算
	};

	const fetchEvents = async () => {
		try {
			console.log("正在获取动态流程数据...");
			const response1 = await api.getDynamicProcessData().catch(error => {
				console.error('获取动态流程数据失败:', error);
				return { data: { items: [] } };
			});

			if (response1.data && response1.data.items) {
				// 设置事件数据
				events.value = [...response1.data.items];

				// 重置当前页码
				if (currentPage.value !== 1) {
					currentPage.value = 1;
				}

				// filteredEvents计算属性会自动根据timeFilter过滤数据并处理分页
				console.log(`获取到 ${events.value.length} 条数据，应用过滤条件: ${timeFilter.value}`);
			} else {
				console.warn("API返回的数据格式不正确:", response.data);
				events.value = [];
			}
		} catch (error) {
			console.error('获取状态日志数据失败:', error);
			events.value = [];
		}
	};

	// 启动定时更新
	const startRefreshing = () => {
		fetchEvents();
		refreshInterval = setInterval(fetchEvents, 30000);
	};

	// 停止定时更新
	const stopRefreshing = () => {
		if (refreshInterval) {
			clearInterval(refreshInterval);
			refreshInterval = null;
		}
	};

	// 跳转到指定页
	const goToPage = (page) => {
		if (page < 1 || page > totalPages.value) return;
		currentPage.value = page;
		// 不需要重新调用fetchEvents，因为filteredEvents会自动更新
	};

	// 跳转到上一页
	const goToPrevPage = () => {
		if (currentPage.value > 1) {
			currentPage.value--;
			// 不需要重新调用fetchEvents，因为filteredEvents会自动更新
		}
	};

	// 跳转到下一页
	const goToNextPage = () => {
		if (currentPage.value < totalPages.value) {
			currentPage.value++;
			// 不需要重新调用fetchEvents，因为filteredEvents会自动更新
		}
	};

	// 处理页码输入
	const handlePageInput = (event) => {
		pageJump.value = event.target.value;
	};

	// 处理跳转页码
	const handlePageJump = () => {
		const page = parseInt(pageJump.value);
		if (!isNaN(page) && page >= 1 && page <= totalPages.value) {
			goToPage(page);
		}
		pageJump.value = '';
	};

	// 获取分页页码数组
	const getPaginationNumbers = () => {
		// 如果总页数小于等于5，则全部显示
		if (totalPages.value <= 5) {
			return Array.from({ length: totalPages.value }, (_, i) => i + 1);
		}

		// 否则，显示当前页附近的页码
		const numbers = [];
		const start = Math.max(2, currentPage.value - 1);
		const end = Math.min(totalPages.value - 1, currentPage.value + 1);

		for (let i = start; i <= end; i++) {
			numbers.push(i);
		}

		return numbers;
	};
	const timer = ref(null)
onMounted(() => {
	// 初始化数据
		fetchEvents();
		getRobotNumber();
	getAbilityNumber()
	// 定时更新数据
	timer.value = setInterval(() => {
			fetchEvents()
			getRobotNumber()
			getAbilityNumber()
		}, 5000)
	});

	onUnmounted(() => {
		stopRefreshing();
		clearInterval(timer.value)
	});
</script>

<style lang="scss" scoped>
	.workflow-container {
		padding: 16px;
		font-size: 2vw;
		background-color: transparent;
		height: calc(100vh - 32px);
		overflow: hidden;

		.top-section {
			display: flex;
			gap: 16px;
			margin-bottom: 16px;

			.search-filters {
				flex: 0 0 auto;
				min-width: 40%;
				height: 16.5vh;
				background: rgba(255, 255, 255, 0.1);
				border-radius: 8px;
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);

				h3 {
					margin: 0;
					padding: 12px 0px;
					margin: 0 1.6vw;
					font-size: 1.5vw;
					font-weight: normal;
					color: #fff;
					border-bottom: 1px solid rgba($color: #FFF, $alpha: 0.2);
				}

				.radio-group {
					padding: 2.4vh 1.6vw;
					display: flex;
					gap: 2.4vw;

					.radio-item {
						display: flex;
						align-items: center;
						gap: 8px;
						cursor: pointer;
						white-space: nowrap;

						input[type="radio"] {
							margin: 0;
							width: 1.5vw;
							height: 1.5vw;
							cursor: pointer;
							accent-color: #1890ff;
						}

						span {
							color: #fff;
							font-size: 1.5vw;
						}
					}
				}
			}

			.stats-cards {
				flex: 1;
				display: flex;
				gap: 16px;

				.stat-card {
					flex: 1;
					background: rgba(255, 255, 255, 0.1);
					border-radius: 8px;
					padding: 16px;
					height: 16.5vh;
					box-sizing: border-box;
					box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
					color: #fff;
					.stat-content {
						// display: flex;
						// align-items: center;
						// justify-content: center;
						// flex-wrap: wrap;
						gap: 12px;
						height: 100%;
					}

					.stat-circle {
						margin: 0 auto;
						margin-bottom: 1vh;
						width: 8.6vh;
						height: 8.6vh;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 2vw;
						font-weight: 500;

						&.light-blue {
							background-color: rgba(24, 144, 255, 0.1);
							color: #1890ff;
						}

						&.light-yellow {
							background-color: rgba(250, 173, 20, 0.1);
							color: #faad14;
						}

						&.light-purple {
							background-color: rgba(114, 46, 209, 0.1);
							color: #722ed1;
						}
					}

					.stat-label {
						font-size: 1.5vw;
						width: 100%;
						text-align: center;
						color: #fff;
					}
				}
			}
		}

		.table-section {
			background: rgba(255, 255, 255, 0.1);
			border-radius: 8px;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
			height: calc(100% - 120px);
			display: flex;
			flex-direction: column;
			position: relative;

			.filter-info {
				padding: 10px 16px;
				// background: #f9f9f9;
				border-bottom: 1px solid rgba($color: #FFF, $alpha: 0.2);
				display: flex;
				align-items: center;
				gap: 8px;

				.info-icon {
					color: #666;
					font-size: 1.5vw;
				}

				.info-text {
					color: #fff;
					font-size: 1.5vw;
				}

				.clear-filter {
					color: #1890ff;
					font-size: 1.5vw;
					cursor: pointer;
				}
			}

			.table-container {
				flex: 1;
				overflow: auto;
				padding: 0;
				margin-bottom: 56px;
				border-radius: 8px;

				/* 空状态样式 */
				.empty-state {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 43.2vh;

					.empty-icon {
						font-size: 4.8vw;
						color: #d9d9d9;
						margin-bottom: 1.6vw;
					}

					.empty-message {
						font-size: 1.6vw;
						color: #fff;
						margin-bottom: 2.4vw;
					}

					.empty-action {
						padding: 0.6vh 1.6vw;
						background: #1890ff;
						border: none;
						border-radius: 0.4vh;
						color: white;
						font-size: 1.6vw;
						cursor: pointer;
						transition: background-color 0.3s;

						&:hover {
							background-color: #40a9ff;
						}
					}
				}
			}

			.data-table {
				width: 100%;
				border-collapse: separate;
				border-spacing: 0;
				table-layout: fixed;
				border-radius: 8px;

				th,
				td {
					padding: 1.2vh 1vw;
					text-align: left;
					font-size: 1.5vw;
					border-bottom: 1px solid #f0f0f0;
					vertical-align: middle;
				}

				th {
					background-color: rgba($color: #2e5fac, $alpha: 1	);
					color: #fff;
					font-weight: normal;
					position: sticky;
					top: 0;
					z-index: 1;
					text-align: center;
					/* 表头居中 */
				}

				td {
					height: 4.6vh;
					word-break: break-word;
					white-space: normal;
					color: #fff;
				}

				.status-col {
					width: 6vw;
					text-align: center;
					margin-left: 1.4vw;
				}

				.action-status-col{
					width: 6vw;
					text-align: center;
				}

				th:nth-child(2),
				td:nth-child(2) {
					width: 14%;
					text-align: left;
					padding-left: 1.4vw;
				}

				th:nth-child(3),
				td:nth-child(3) {
					width: 8%;
					text-align: center !important;
					/* 强制居中对齐 */
					padding-left: 0 !important;
					/* 清除左内边距 */
					padding-right: 0 !important;
					/* 清除右内边距 */
					vertical-align: middle;
					box-sizing: border-box;
					margin: 0;
				}

				th:nth-child(4),
				td:nth-child(4) {
					width: 12%;
					text-align: center;
				}

				th:nth-child(5),
				td:nth-child(5) {
					width: 10%;
					text-align: center;
				}

				th:nth-child(6),
				td:nth-child(6) {
					width: 16%;
					text-align: center;
				}

				th:nth-child(7),
				td:nth-child(7) {
					width: 14%;
					text-align: center;
				}

				th:nth-child(8),
				td:nth-child(8) {
					width: 14%;
					text-align: center;
				}

				.status-icon {
					width: 2.4vw;
					height: 2.4vw;
					border-radius: 50%;
					display: inline-flex;
					align-items: center;
					justify-content: center;

					.status-svg {
						width: 26px;
						height: 26px;
					}
				}

				.status-tag {
					display: inline-block;
					padding: 0.4vh 1vw;
					border-radius: 1.2vh;
					font-size: 1.5vw;
					line-height: 1.6vh;
					width: 8vw;

					&.running {
						color: #1890ff;
						border: 1px solid #91d5ff;
					}

					&.Pending {
						color: #fa8c16;
						border: 1px solid #ffd591;
					}

					&.stop {
						color: #f5222d;
						border: 1px solid #ffa39e;
					}
				}

				.actions {

					width: 100%;
					.action-icons {
						display: flex;
						gap: 1.6vw;
						align-items: center;
						margin-left: 2.4vw;
						color: #fff;
						.action-icon {
							width: 2.4vh;
							height: 2.4vh;
							cursor: pointer;
							opacity: 0.7;
							transition: opacity 0.3s;

							&:hover {
								opacity: 1;
							}
						}
					}
				}

				tr {
					height: 6vh;


					&:hover {
						background-color: rgba($color: #2e5fac, $alpha: 0.5);

						td {
							background-color: transparent;
						}
					}

					&:nth-child(even) {
						// background-color: #fafafa;

						&:hover {
							background-color: rgba($color: #2e5fac, $alpha: 0.5);
						}
					}

					&:last-child td {
						border-bottom: none;
					}
				}

				td {
					color: #fff;
					white-space: normal;
					line-height: 1.6;
					text-align: center;
					background-color: transparent;
				}

				.workflow-row {
					&.expanded {
						background-color: rgba(24, 144, 255, 0.05); // 展开时的背景色
						border-bottom: none; // 移除底部边框，与任务行视觉上更连贯

						td {
							font-weight: 800; // 展开时工作流行字体加粗
						}
					}

					td {
						&:nth-child(8) {
							margin-left: 7.4vw; // 调整与标题对齐
							text-align: left; // 确保左对齐
						}
					}
				}

				.task-row {
					// background-color: rgba(245, 247, 250, 0.7); // 任务行的背景色

					td {
						// 任务行的单元格样式
						padding-left: 1.4vw; // 保持原有的左边距

						&:first-child {
							padding-left: 3.4vw; // 第一个单元格缩进
						}

						// 第三个单元格（任务名称列）特殊处理
						&:nth-child(3) {
							padding-left: 1.4vw; // 调整与标题对齐
							text-align: left; // 确保左对齐
							font-weight: 500; // 稍微加粗使文字更明显
						}

						// 第二个单元格（空白的工作流名称列）
						&:nth-child(2) {
							&::before {
								display: none; // 移除之前可能添加的视觉指示，如果有的话
							}
						}

						&:nth-child(8) {
							margin-left: 10vw; // 调整与标题对齐
							text-align: left; // 确保左对齐
						}
					}
				}

				.subtask-row{
					// background-color: rgba(245, 247, 250, 0.7); // 任务行的背景色

					td {
						// 任务行的单元格样式
						padding-left: 1.4vw; // 保持原有的左边距

						&:first-child {
							padding-left: 6vw; // 第一个单元格缩进
						}

						// 第三个单元格（任务名称列）特殊处理
						&:nth-child(3) {
							padding-left: 1.6vw; // 调整与标题对齐
							text-align: left; // 确保左对齐
							font-weight: 500; // 稍微加粗使文字更明显
						}

						// 第二个单元格（空白的工作流名称列）
						&:nth-child(2) {
							&::before {
								display: none; // 移除之前可能添加的视觉指示，如果有的话
							}
						}

						&:nth-child(8) {
							margin-left: 10vw; // 调整与标题对齐
							text-align: left; // 确保左对齐
						}
					}
				}

				.no-tasks-row {
					// background-color: #f9f9f9;

					.no-tasks-message {
						text-align: center;
						color: #fff;
						padding: 12px;
						font-style: italic;
					}
				}
			}

			.pagination {
				position: absolute;
				bottom: 0;
				left: 0;
				border-bottom-right-radius: 0.8vh;
				border-bottom-left-radius: 0.8vh;
				right: 0;
				padding: 1.6vh 1.6vw;
				background: #2e5fac;
				border-top: 1px solid rgba($color: #fff, $alpha: .5);
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 8px;
				z-index: 5;

				.page-btn {
					min-width: 3.2vh;
					height: 3.2vh;
					padding: 0 0.8vh;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					border: 1px solid #d9d9d9;
					border-radius: 2px;
					background: white;
					color: #fff;
					font-size: 1.3vh;
					text-decoration: none;
					transition: all 0.3s;

					&:hover {
						color: #1890ff;
						border-color: #1890ff;
					}

					&.active {
						background: #1890ff;
						border-color: #1890ff;
						color: white;
					}

					&.disabled {
						color: #d9d9d9;
						cursor: not-allowed;

						&:hover {
							color: #d9d9d9;
							border-color: #d9d9d9;
						}
					}

					.page-arrow {
						font-weight: bold;
					}
				}

				.ellipsis {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					height: 3.2vh;
					color: #fff;
				}

				.page-info-section {
					margin-left: 1.6vw;
					display: flex;
					gap: 1.2vh;

					.page-info {
						color: #fff;
						font-size: 1.3vh;
					}
				}

				.page-jump-section {
					margin-left: 1.6vw;
					display: flex;
					align-items: center;
					gap: 0.8vh;

					.goto {
						color: #fff;
						font-size: 1.3vh;
					}

					.page-input {
						width: 4vh;
						height: 2.8vh;
						padding: 0.4vh 0.8vh;
						border: 1px solid #d9d9d9;
						border-radius: 2px;
						text-align: center;
					}

					.page-text {
						color: #fff;
						font-size: 1.3vh;
					}

					.confirm-btn {
						height: 2.8vh;
						padding: 0 1.2vh;
						background: #1890ff;
						border: none;
						border-radius: 2px;
						color: white;
						font-size: 1.3vh;
						cursor: pointer;
						transition: background-color 0.3s;

						&:hover {
							background-color: #40a9ff;
						}
					}
				}
			}
		}
	}

	::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}

	::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 3px;
	}

	::-webkit-scrollbar-thumb {
		background: #ccc;
		border-radius: 3px;
	}

	::-webkit-scrollbar-thumb:hover {
		background: #999;
	}
</style>